<style>
    .xxpayPopupDiv .layui-form-label {
        width:15% !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 33% !important;
    }

    .mchProgressDiv{width:20%; float: left; text-align: right}
    .mchInfoExtDiv{margin-top: 30px;}
    .requiredSpan{color:red}


</style>
<div class="layui-fluid">
    <div class="layui-progress layui-progress-big" lay-filter="mchProgressFilter">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="25%"></div>
    </div>
    <div class="mchProgressDiv">1.商户基本信息</div>
    <div class="mchProgressDiv">2.商户经营信息</div>
    <div class="mchProgressDiv">3.商户证件信息</div>
    <div class="mchProgressDiv">4.结算账号及其他</div>
    <div class="mchProgressDiv">5.完成</div>
    <span class="rejectRemark layui-hide" style="margin-left: 1%;margin-top: 5px">审核拒绝原因：<a id="failResult" style="font-size: x-small;color: #cc0000"></a></span>
    <!-- 第一步 -->
    <div id="mchInfoExtDiv1" class="layui-card mchInfoExtDiv">
        <form class="layui-form layui-form-pane" lay-filter="data1">
            <input type="hidden" name="passageTemplateId" id="passageTemplateId">
            <input type="hidden" name="subMchId" id="subMchId">

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">商户基本信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商家类型</label>
                        <div style="width: 297px; " class="layui-input-inline">
                            <select name="merchantType" lay-search lay-verify="required" id="merchantType" lay-filter="merchantTypeFilter">
                                <option value="01">企业</option>
                                <option value="02">事业单位</option>
                                <option value="03">民办非企业组织</option>
                                <option value="04">社会团体</option>
                                <option value="05">党政及国家机关</option>
                                <option value="06">个人商户</option>
                                <option value="07">个体工商户</option>
                            </select>
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>联系人类型</label>
                        <div style="width: 297px;" class="layui-input-inline">
                            <select name="contactType" lay-search lay-verify="required" id="contactType">
                                <option value="LEGAL_PERSON">法人</option>
                                <option value="CONTROLLER">实际控制人</option>
                                <option value="AGENT">代理人</option>
                                <option value="OTHER">其他</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>联系人姓名</label>
                        <div class="layui-input-inline">
                            <input id="contactName" name="contactName" autocomplete="off" lay-verify="required" placeholder="请输入联系人姓名" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>联系人手机号</label>
                        <div class="layui-input-inline">
                            <input id="contactMobile" name="contactMobile" placeholder="请输入联系人手机号" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户名称全称</label>
                        <div class="layui-input-inline">
                            <input id="name" name="name" lay-verify="required" placeholder="请输入商户名称全称" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户名称简称</label>
                        <div class="layui-input-inline">
                            <input id="aliasName" name="aliasName" lay-verify="required" placeholder="请输入商户名称简称" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item" style="text-align: center;">
                        <button class="layui-btn layui-btn-primary nextBtn" lay-submit lay-filter="mchInfoExtDiv1Submit">下一步</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 第二步 -->
    <div id="mchInfoExtDiv2" class="layui-card mchInfoExtDiv">
        <form class="layui-form layui-form-pane" lay-filter="data2">

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">商户经营信息<span class="requiredSpan"> [请上传.jpg格式图片] </span></li>
                </ul>
                <div class="layui-tab-content">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>客服电话</label>
                        <div class="layui-input-inline">
                            <input name="servicePhone" id="servicePhone" lay-verify="required" placeholder="输入客服电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>经营地址选择省、市、县</label>
                        <div style="width: 297px; display: inline-block;">
                            <select name="provinceCode" lay-search lay-verify="required" id="provinceSelect" lay-filter="provinceSelectFilter">
                                <option value="">-- 省 --</option>
                            </select>
                        </div>
                        <div style="width: 297px; display: inline-block;">
                            <select name="cityCode" lay-search lay-verify="required" id="citySelect" lay-filter="citySelectFilter">
                                <option value="">-- 市 --</option>
                            </select>
                        </div>
                        <div style="width: 297px; display: inline-block;">
                            <select name="districtCode" lay-verify="required" lay-search id="areaSelect" lay-filter="areaSelectFilter">
                                <option value="">-- 区 / 县 --</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>经营地址</label>
                        <div class="layui-input-inline">
                            <input name="address" id="address" lay-verify="required" placeholder="请输入经营地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item facePay">
                        <label class="layui-form-label"><span class="requiredSpan"></span>门头照</label>
                        <div class="layui-input-inline">
                            <input class="imgVal" type="hidden" name="outDoorImages" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn layui-btn-primary prevProgressBtn" onclick="return false;" toStep="1">上一步</button>
                <button class="layui-btn layui-btn-primary nextBtn" lay-submit lay-filter="mchInfoExtDiv2Submit">下一步</button>
            </div>

        </form>

    </div>

    <!-- 第三步 -->
    <div id="mchInfoExtDiv3" class="layui-card mchInfoExtDiv">
        <form class="layui-form layui-form-pane" lay-filter="data3">

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">商户证件信息<span class="requiredSpan"> [请上传.jpg格式图片] </span></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>法人姓名</label>
                        <div class="layui-input-inline">
                            <input name="legalName" id="legalName" lay-verify="required" placeholder="请输入法人姓名" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>法人身份证号</label>
                        <div class="layui-input-inline">
                            <input name="legalCertNo" id="legalCertNo" lay-verify="required" placeholder="请输入法人身份证号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item noRequired">
                        <label class="layui-form-label"><span class="requiredSpan"> </span>法人身份证正面</label>
                        <div class="layui-input-inline">
                            <input class="imgVal" type="hidden" name="legalCertFrontImage" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan"> </span>法人身份证反面</label>
                        <div class="layui-input-inline">
                            <input class="imgVal" type="hidden" name="legalCertBackImage" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <a href="https://gw.alipayobjects.com/os/bmw-prod/851f4f42-4abc-4eb0-abbf-6e6812bf8d8c.xlsx" class="layui-form-label" style="color: #3292FB"><span class="requiredSpan">* </span>商户类别mcc码(点击下载)</a>
                        <div class="layui-input-inline">
                            <input name="mccCode" id="mccCode" lay-verify="required" placeholder="请输入商户类别mcc码" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户证件类型</label>
                        <div style="width: 297px;" class="layui-input-inline">
                            <select name="certType" lay-search lay-verify="required" id="certType">
                                <option value="100">个人商户身份证</option>
                                <option value="201">营业执照</option>
                                <option value="2011">营业执照（统一社会信用代码）</option>
                                <option value="204">民办非企业登记证书</option>
                                <option value="206">社会团体法人登记证书</option>
                                <option value="218">事业单位法人证书</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户证件编号</label>
                        <div class="layui-input-inline">
                            <input name="certNo" id="certNo" lay-verify="required" placeholder="请输入商户证件编号" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label noRequired"><span class="requiredSpan"></span>营业执照名称</label>
                        <div class="layui-input-inline noRequired">
                            <input name="certName" id="certName" placeholder="请输入营业执照名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item noRequired">
                        <label class="layui-form-label"><span class="requiredSpan"> </span>营业执照</label>
                        <div class="layui-input-inline">
                            <input class="imgVal" type="hidden" name="certImage" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan"> </span>证件反面照片</label>
                        <div class="layui-input-inline">
                            <input class="imgVal" type="hidden" name="certImageBack" />
                            <img class="uploadImg layui-hide" style="height:38px; margin-left:30px;cursor: pointer;" title="点击放大" />
                            <button class="uploadImgBtn layui-btn layui-btn-sm" type="button" style="margin-left: 20px;">上传图片</button>
                            <button class="delImgBtn layui-btn layui-btn-sm layui-btn-danger layui-hide" type="button">删除图片</button>
                        </div>
                    </div>

                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn layui-btn-primary prevProgressBtn" onclick="return false;" toStep="2">上一步</button>
                <button class="layui-btn layui-btn-primary nextBtn" lay-submit lay-filter="mchInfoExtDiv3Submit">下一步</button>
            </div>

        </form>

    </div>

    <!-- 第四步 -->
    <div id="mchInfoExtDiv4" class="layui-card mchInfoExtDiv" lay-filter="data4">
        <form class="layui-form layui-form-pane">

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">结算账号及其他</li>
                </ul>
                <div class="layui-tab-content">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>使用服务</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="serviceCheck" value="当面付" title="当面付">
                            <input type="checkbox" name="serviceCheck" value="app支付" title="app支付">
                            <input type="checkbox" name="serviceCheck" value="wap支付" title="wap支付">
                            <input type="checkbox" name="serviceCheck" value="电脑支付" title="电脑支付">
                        </div>
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户与服务商签约时间</label>
                        <div class="layui-input-inline">
                            <input name="signTimeWithIsv" id="signTimeWithIsv" readonly lay-verify="required" placeholder="请选择商户与服务商签约时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户支付宝账号（结算）</label>
                        <div class="layui-input-inline">
                            <input name="alipayLogonId" id="alipayLogonId" lay-verify="required" placeholder="请输入商户支付宝账号" autocomplete="off" class="layui-input">
                        </div>

                        <label class="layui-form-label"><span class="requiredSpan">* </span>商户支付宝账户（协议确认）</label>
                        <div class="layui-input-inline">
                            <input name="bindingAlipayLogonId" lay-verify="required" id="bindingAlipayLogonId" placeholder="请输入商户支付宝账号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <fieldset class="layui-elem-field">
                        <legend style="margin-bottom: 10px">
                            <button class='layui-btn layui-btn-xs layui-btn-danger'>站点信息配置</button>
                            <button class="layui-btn layui-btn-xs layui-bg-red">至少填入一栏站点信息</button>
                        </legend>
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-md4">
                                <legend>
                                    <a style="margin-left: 220px;margin-bottom: 10px" class="layui-btn layui-btn-sm layui-bg-orange">商户站点类型</a>
                                </legend>
                                <div class="grid-demo grid-demo-bg1">
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <select name="siteType0" lay-search id="siteType0">
                                            <option value="">请选择商户站点类型</option>
                                            <option value="01">网站</option>
                                            <option value="02">APP</option>
                                            <option value="03">服务窗</option>
                                            <option value="04">公众号</option>
                                            <option value="05">其他</option>
                                            <option value="06">支付宝小程序</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <select name="siteType1" lay-search id="siteType1">
                                            <option value="">请选择商户站点类型</option>
                                            <option value="01">网站</option>
                                            <option value="02">APP</option>
                                            <option value="03">服务窗</option>
                                            <option value="04">公众号</option>
                                            <option value="05">其他</option>
                                            <option value="06">支付宝小程序</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <select name="siteType2" lay-search id="siteType2">
                                            <option value="">请选择商户站点类型</option>
                                            <option value="01">网站</option>
                                            <option value="02">APP</option>
                                            <option value="03">服务窗</option>
                                            <option value="04">公众号</option>
                                            <option value="05">其他</option>
                                            <option value="06">支付宝小程序</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <legend>
                                    <a style="margin-left: 220px;margin-bottom: 10px" class="layui-btn layui-btn-sm layui-bg-orange">站点名称</a>
                                </legend>
                                <div class="grid-demo">
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteName0" id="siteName0" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteName1" id="siteName1" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteName2" id="siteName2" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <legend>
                                    <a style="margin-left: 220px;margin-bottom: 10px" class="layui-btn layui-btn-sm layui-bg-orange">站点地址</a>
                                </legend>
                                <div class="grid-demo grid-demo-bg1">
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteUrl0" id="siteUrl0" placeholder="请输入站点地址" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteUrl1" id="siteUrl1" placeholder="请输入站点地址" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-block" style="margin-bottom: 10px">
                                        <input name="siteUrl2" id="siteUrl2" placeholder="请输入站点地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <input name="siteArray" autocomplete="off" class="layui-input layui-hide">
                    <input name="serviceArray" autocomplete="off" class="layui-input layui-hide">

                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn layui-btn-primary prevProgressBtn" onclick="return false;" toStep="3">上一步</button>
                <button class="layui-btn" id="applyBtn" lay-submit lay-filter="mchInfoExtDiv4Submit">发起进件</button>
            </div>

        </form>

    </div>

</div>

<script>
    layui.use(['admin', 'form','view', 'laydate', 'upload', 'setter'],function(){
        var form = layui.form
            ,$ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,view = layui.view
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,upload = layui.upload
            ,setter = layui.setter;

        element.render('breadcrumb', 'breadcrumb');

        var passageTemplateId = view.getOpenParams('passageTemplateId');   // 当前子账户ID
        var subMchId = view.getOpenParams('subMchId');   // 子商户ID
        $("#passageTemplateId").val(passageTemplateId);
        $("#subMchId").val(subMchId);
        console.log(passageTemplateId)
        console.log(subMchId)
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/pay_alizft_mchInfo/get',
            data: {
                subMchId:subMchId,
            },
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                    if(!res.data){  //不存在进件信息
                        resetProvinceSelect(-1);  //初始化 省
                        return false;
                    }

                    var applyStatus = res.data.applyStatus;
                    if (applyStatus == 2 || applyStatus ==3 || applyStatus == 99) {
                        $("#applyBtn").addClass("layui-hide");
                    }
                    if (applyStatus == 98) {
                        $(".rejectRemark").removeClass("layui-hide");
                        $("#failResult").html(res.data.rejectRemark);
                    }

                    // 第一部分
                    $('#subMchId').val(res.data.subMchId);
                    $('select[name="merchantType"] option[value="'+res.data.merchantType+'"]').prop('selected', true);    // 商家类型
                    $('select[name="contactType"] option[value="'+res.data.contactType+'"]').prop('selected', true);    // 联系人类型
                    $('#contactName').val(res.data.contactName);  // 联系人姓名
                    $('#contactMobile').val(res.data.contactMobile);  // 联系人手机号
                    $('#name').val(res.data.name);  // 商户名称全称
                    $('#aliasName').val(res.data.aliasName);  // 商户名称简称
                    // 第二部分
                    $('#servicePhone').val(res.data.servicePhone);  // 客服电话
                    $('#address').val(res.data.address);  // 经营地址
                    if(res.data.outDoorImages){                // 门头照
                        setImgValFunc("outDoorImages", res.data.outDoorImages, true);
                    }

                    //开户行省，市，县
                    if(res.data.provinceCode){
                        //已选择的 省， 市， 县
                        var selectedProvinceCode = res.data.provinceCode;
                        var selectedCityCode = res.data.cityCode;
                        var selectedAreaCode = res.data.districtCode;

                        resetProvinceSelect(selectedProvinceCode);
                        resetCitySelect(selectedProvinceCode, selectedCityCode);
                        resetAreaSelect(selectedCityCode, selectedAreaCode);
                    }else{
                        resetProvinceSelect(-1);  //初始化 省
                    }

                    // 第三部分
                    $('#legalName').val(res.data.legalName);  // 法人姓名
                    $('#legalCertNo').val(res.data.legalCertNo);  // 法人身份证号
                    if(res.data.legalCertFrontImage){                // 法人身份证照正面
                        setImgValFunc("legalCertFrontImage", res.data.legalCertFrontImage, true);
                    }
                    if(res.data.legalCertBackImage){                // 法人身份证照反面
                        setImgValFunc("legalCertBackImage", res.data.legalCertBackImage, true);
                    }
                    $('#mccCode').val(res.data.mccCode);  // 商户类别MCC码
                    $('select[name="certType"] option[value="'+res.data.certType+'"]').prop('selected', true);    // 证件类型
                    $('#certNo').val(res.data.certNo);  // 商户证件编号
                    $('#certName').val(res.data.certName);  // 营业执照名称
                    if(res.data.certImage){                // 营业执照
                        setImgValFunc("certImage", res.data.certImage, true);
                    }
                    if(res.data.certImageBack){                // 执照反面
                        setImgValFunc("certImageBack", res.data.certImageBack, true);
                    }
                    // 第四部分
                    var siteArry = JSON.parse(res.data.siteArray);
                    for (var i = 0; i < siteArry.length; i++) {
                        $('select[name="siteType'+i+'"] option[value="'+siteArry[i].site_type+'"]').prop('selected', true);    // 商户站点类型
                        $('#siteName'+i+'').val(siteArry[i].site_name);  // 站点名称
                        $('#siteUrl'+i+'').val(siteArry[i].site_url);  // 站点地址
                    }

                    $('#signTimeWithIsv').val(res.data.signTimeWithIsv);  // 签约时间
                    $('#alipayLogonId').val(res.data.alipayLogonId);  // 商户支付宝账号（结算）
                    $('#bindingAlipayLogonId').val(res.data.bindingAlipayLogonId);  // 商户支付宝账户（协议确认）


                    if (res.data.merchantType == 06) {
                        $(".noRequired").addClass("layui-hide");
                        // 进度栏全部显示
                        $(".mchInfoExtDiv").show();  //全部显示
                        // 隐藏所有上一步、下一步
                        $(".prevProgressBtn").hide();  //全部隐藏
                        $(".nextBtn").hide();  //全部隐藏
                        element.progress('mchProgressFilter', '100%');
                    }else {
                        $(".noRequired").removeClass("layui-hide");

                        // 进度栏全部隐藏、显示进度一
                        $(".mchInfoExtDiv").hide();  //全部隐藏
                        $("#mchInfoExtDiv1").show(200);
                        element.progress('mchProgressFilter', '20%');

                        // 隐藏所有上一步、下一步
                        $(".prevProgressBtn").show();  //全部显示
                        $(".nextBtn").show();  //全部显示
                    }

                    var serviceArray = res.data.serviceArray;
                    serviceArray = serviceArray.substring(1, serviceArray.length-1).split(",");
                    for (var i = 0; i < serviceArray.length; i++) {
                        $('input[name="serviceCheck"][value='+serviceArray[i]+']').prop('checked', true);    // 商户站点类型
                        console.log(serviceArray[i])
                        if(serviceArray[i] == '"wap支付"' || serviceArray[i] == '"电脑支付"') {
                            $(".siteInfo").removeClass("layui-hide");
                        }else {
                            $(".siteInfo").addClass("layui-hide");
                        }
                        if (serviceArray[i] == '"当面付"') {
                            $(".facePay").removeClass("layui-hide");
                        }
                    }

                    form.render();
                }
            }
        });

        //显示第几步
        var showMchInfoExtDiv = function(step){

            $(".mchInfoExtDiv").hide();  //全部隐藏

            if(step == 1){   //1.商户基本信息

                $("#mchInfoExtDiv1").show(200);
                element.progress('mchProgressFilter', '20%');

            }else if(step == 2){  //2.商户经营信息

                $("#mchInfoExtDiv2").show(200);
                element.progress('mchProgressFilter', '40%');

            }else if(step == 3){    //3.商户证件信息

                $("#mchInfoExtDiv3").show(200);
                element.progress('mchProgressFilter', '60%');

            }else if(step == 4){    //4.结算账号及其他

                $("#mchInfoExtDiv4").show(200);
                element.progress('mchProgressFilter', '80%');

            }else if(step == 5){    //完成

                element.progress('mchProgressFilter', '100%');
            }

        };

        //绑定所有的 上一步按钮
        $(".prevProgressBtn").click(function(){
            var toStep = $(this).attr('toStep');
            showMchInfoExtDiv(toStep);
            return false;
        });

        // 重置 [省] 下拉框
        var resetProvinceSelect = function(selectedCode){
            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/area_code/provinces',
                error: function(err){
                    layer.alert(JSON.stringify(err.field), {title: '错误提示'})
                },
                success: function(res){
                    if(res.code == 0){
                        $.each(res.data, function(){
                            var selectHtml = this.provinceCode == selectedCode ? "selected" : "";
                            $("#provinceSelect").append("<option "+selectHtml+" item value='"+this.provinceCode+"'>"+this.provinceName+"</option>");
                        });
                        form.render();
                    }
                }
            });
        };

        // 重置 [市] 下拉框
        var resetCitySelect = function(provinceCode, selectedCode){
            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/area_code/cities?provinceCode=' + provinceCode,
                error: function(err){
                    layer.alert(JSON.stringify(err.field), {title: '错误提示'})
                },
                success: function(res){
                    if(res.code == 0){
                        $.each(res.data, function(){
                            var selectHtml = this.cityCode == selectedCode ? "selected" : "";
                            $("#citySelect").append("<option "+selectHtml+" item value='"+this.cityCode+"'>"+this.cityName+"</option>");
                        });
                        form.render();
                    }
                }
            });
        };

        // 重置 [县] 下拉框
        var resetAreaSelect = function(cityCode, selectedCode){
            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/area_code/areas?cityCode=' + cityCode,
                error: function(err){
                    layer.alert(JSON.stringify(err.field), {title: '错误提示'})
                },
                success: function(res){
                    if(res.code == 0){
                        $.each(res.data, function(){
                            var selectHtml = this.areaCode == selectedCode ? "selected" : "";
                            $("#areaSelect").append("<option "+selectHtml+" item value='"+this.areaCode+"'>"+this.areaName+"</option>");
                        });
                        form.render();
                    }
                }
            });
        };


        //监听 [省] 下拉框
        form.on('select(provinceSelectFilter)', function(data){

            //清空， 市， 区 下拉框
            $("#citySelect option[item]").remove();
            $("#areaSelect option[item]").remove();

            var provinceCode = data.value; //省级编码
            if(!provinceCode){
                form.render();
                return false; //未选择
            }
            resetCitySelect(provinceCode, "");
        });

        //监听 [市] 下拉框
        form.on('select(citySelectFilter)', function(data){

            //清空 区 下拉框
            $("#areaSelect option[item]").remove();

            var cityCode = data.value; //市级编码
            if(!cityCode){
                form.render();
                return false; //未选择
            }

            resetAreaSelect(cityCode, "");

        });

        // 监听商家类型
        form.on('select(merchantTypeFilter)', function(data){
            console.log(data.value)
            if (data.value == 06) {
                $(".noRequired").addClass("layui-hide");
                // 进度栏全部显示
                $(".mchInfoExtDiv").show();  //全部显示
                // 隐藏所有上一步、下一步
                $(".prevProgressBtn").hide();  //全部隐藏
                $(".nextBtn").hide();  //全部隐藏
                element.progress('mchProgressFilter', '100%');
            }else {
                $(".noRequired").removeClass("layui-hide");

                // 进度栏全部隐藏、显示进度一
                $(".mchInfoExtDiv").hide();  //全部隐藏
                $("#mchInfoExtDiv1").show(200);
                element.progress('mchProgressFilter', '20%');

                // 隐藏所有上一步、下一步
                $(".prevProgressBtn").show();  //全部显示
                $(".nextBtn").show();  //全部显示
            }
            form.render();
        });


        //监听时间控件
        laydate.render({elem: '#signTimeWithIsv'});

        //上传图片接口
        var headers = {};
        headers[setter.request.tokenName] = layui.data(setter.tableName)[setter.request.tokenName];
        upload.render({
            url: layui.setter.baseUrl + '/upload/putImg?'+setter.request.tokenName+"="+layui.data(setter.tableName)[setter.request.tokenName]
            , elem: '.uploadImgBtn'
            , headers: headers
            , size: 2048  //仅支持2M图片上传
            ,done: function(res, index, upload){

                //如果上传失败
                if(res.code != 0){
                    return layer.msg('上传失败['+res.msg+']', {icon: 2});
                }
                var divElem = $(this.item).parent();
                divElem.find('.imgVal').val(res.data); //图片真实路径
                divElem.find('.uploadImg').attr("src", res.data).removeClass('layui-hide');
                divElem.find('.delImgBtn').removeClass('layui-hide');
                divElem.find('.uploadImgBtn').text('重新上传');
                form.render();
            }
        });

        //点击[删除图片] 按钮， 事件
        $('.delImgBtn').click(function(){

            var divElem = $(this).parent();
            divElem.find('.imgVal').val(""); //清空图片真实路径
            divElem.find('.uploadImgBtn').text("上传图片");
            divElem.find('.uploadImg').attr("src", "").addClass('layui-hide');
            divElem.find('.delImgBtn').addClass('layui-hide');
            form.render();
        });

        //点击[图片] 按钮， 事件
        $('body').on('click', '.uploadImg', function(){
            var imgSrc = $(this).attr('src');
            layer.photos({photos: {
                    "title": "查看上传图片", //相册标题
                    "id": 1, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [   //相册包含的图片，数组格式
                        {
                            "alt": "图片",
                            "pid": 1, //图片id
                            "src": imgSrc, //原图地址
                            "thumb": "" //缩略图地址
                        }
                    ]
                } ,anim: 5});
        });

        var setImgValFunc = function(inputName, src){
            var divElem = $("input[name='"+inputName+"']").parent();
            divElem.find('.imgVal').val(src); //图片真实路径
            divElem.find('.uploadImg').attr("src", src).removeClass('layui-hide');
            divElem.find('.delImgBtn').removeClass('layui-hide');
            divElem.find('.uploadImgBtn').text('重新上传');
        }

        var data1;
        var data2;
        var data3;

        //监听事件： 第1步提交
        form.on('submit(mchInfoExtDiv1Submit)', function(data) {
            if (!data.field.contactMobile) {
                layer.alert('请输入联系人手机号！');
                return false;
            }
            showMchInfoExtDiv(2);    //显示第二步
            return false;
        });

        //监听事件： 第2步提交
        form.on('submit(mchInfoExtDiv2Submit)', function(data) {
            var reqData = data.field;

            //验证 必填信息
            if(!reqData.provinceCode || !reqData.cityCode || !reqData.districtCode){
                layer.alert('请选择开户行地位置信息！');
                return false;
            }

            showMchInfoExtDiv(3);    //跳转到第3步
            return false;
        });

        //监听事件： 第3步提交
        form.on('submit(mchInfoExtDiv3Submit)', function(data) {

            var reqData = data.field;
            // if(!reqData.legalCertFrontImage){ layer.alert('请上传 [法人身份证正面] 图片！'); return false; }
            // if(!reqData.legalCertBackImage){ layer.alert('请上传 [法人身份证反面] 图片！'); return false; }
            // if(!reqData.certImage){ layer.alert('请上传 [营业执照] 图片！'); return false; }
            // if(!reqData.certImageBack){ layer.alert('请上传 [营业执照反面] 图片！'); return false; }

            showMchInfoExtDiv(4);    //跳转到第4步
            return false;
        });

        //监听事件： 第4步提交
        form.on('submit(mchInfoExtDiv4Submit)', function(data) {

            var reqData = data.field;  //请求参数
            var dataVal = {};
            //封装商户使用服务
            var serviceCheck = $("input[name='serviceCheck']");
            var vals = "";
            for(i = 0; i < serviceCheck.length; i++){
                if(serviceCheck[i].checked){
                    var val = '"'+serviceCheck[i].value+'"';
                    if(vals.length>0){
                        vals += "," + val;
                    }else{
                        vals += val;
                    }
                }
            }

            if (vals.length <= 0) {
                layer.alert("请选择要使用的服务！");
                return false;
            }
            reqData.serviceArray = "["+ vals +"]";

            data1 = form.val("data1");
            data2 = form.val("data2");
            data3 = form.val("data3");
            // 手机号验证规则
            var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;

            if (!data1.contactName) {
                layer.alert('请输入联系人姓名！');
                return false;
            }
            if (!data1.contactMobile) {
                layer.alert('请输入联系人手机号！');
                return false;
            }else if (!reg.test(data1.contactMobile)) {
                layer.alert('请输入正确的联系人手机号！');
                return false;
            }
            if (!data1.name) {
                layer.alert('请输入商户名称！');
                return false;
            }
            if (!data1.aliasName) {
                layer.alert('请输入商户名称简称！');
                return false;
            }
            if (!data2.servicePhone) {
                layer.alert('请输入客服电话！');
                return false;
            }
            if (!data2.provinceCode || !data2.cityCode || !data2.districtCode) {
                layer.alert('请选择省市县！');
                return false;
            }
            if (!data2.address) {
                layer.alert('请输入经营地址！');
                return false;
            }
            if (!data3.legalName) {
                layer.alert('请输入法人姓名！');
                return false;
            }
            if (!data3.legalCertNo) {
                layer.alert('请输入法人身份证号！');
                return false;
            }
            if (!data3.mccCode) {
                layer.alert('请输入商户类别mcc码！');
                return false;
            }
            if (!data3.certNo) {
                layer.alert('请输入证件编号！');
                return false;
            }

            //封装商户站点信息
            if (!reqData.siteType0 || !reqData.siteName0 || !reqData.siteName0) {
                layer.alert("至少填入一行站点配置！");
                return false;
            }

             var siteArray = '{"site_type":' +'"'+reqData.siteType0+'", "site_url":'+'"'+reqData.siteUrl0+'", "site_name":'+'"'+reqData.siteName0+'"'+'}';
            if (reqData.siteType1) {
                var siteArray1 = '{"site_type":' +'"'+reqData.siteType1+'", "site_url":'+'"'+reqData.siteUrl1+'", "site_name":'+'"'+reqData.siteName1+'"'+'}';
                siteArray = siteArray + "," + siteArray1;
            }
            if (reqData.siteType2) {
                var siteArray2 = '{"site_type":' +'"'+reqData.siteType2+'", "site_url":'+'"'+reqData.siteUrl2+'", "site_name":'+'"'+reqData.siteName2+'"'+'}';
                siteArray = siteArray + "," + siteArray2;
            }
            reqData.siteArray = "["+ siteArray + "]";
            console.log(reqData.siteArray)

            $.extend(dataVal, data1, data2, data3, reqData);
            console.log(dataVal)

            var array = vals.split(",");
            for (var i = 0; i < array.length; i++) {
               if(array[i] == '"当面付"') {
                   $(".facePay").removeClass("layui-hide");
                   if(!dataVal.outDoorImages){layer.alert('请上传 [门头照] 图片！'); return false; }
               }else {
                   $(".facePay").addClass("layui-hide");
               }
                // if(array[i] == '"wap支付"' || array[i] == '"电脑支付"') {
                //     $(".siteInfo").removeClass("layui-hide");
                //     if(!reqData.siteType0){layer.alert('至少填入一行站点配置！'); return false; }
                // }else {
                //     $(".siteInfo").addClass("layui-hide");
                // }
                form.render();
            }
            if (!dataVal.alipayLogonId) {
                layer.alert('支付宝账号结算不能为空！'); return false;
            }else if (!dataVal.bindingAlipayLogonId) {
                layer.alert('支付宝账号协议确认不能为空！'); return false;
            }
            if (!dataVal.alipayLogonId) {
                dataVal.alipayLogonId = "";
            }
            if (!dataVal.bindingAlipayLogonId) {
                dataVal.bindingAlipayLogonId = "";
            }




            reqUpdateFunc(dataVal, function(res){
                layer.alert("success", {title: "提示"}, function(index){
                    layer.closeAll(); //关闭所有弹层
                    layui.table.reload('tableReload', {page: {curr: 1}}); //调用业务弹层外表格重新加载
                });
            });
            return false;
        });

        /** 通用请求函数  **/
        var reqUpdateFunc = function reqUpdateFunc(reqData, callback){

            var layerShadeId = layer.msg('请稍后...',{time: 0, shade: 0.1});
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/config/pay_alizft_mchInfo/apply',
                data: reqData,
                success: function(res){
                    layer.close(layerShadeId);
                    if(res.code == 0) {
                        // layer.closeAll(); //关闭所有弹层
                        layui.table.reload('tableReload', {page: {curr: 1}}); //调用业务弹层外表格重新加载
                        layer.alert(res.msg);
                        // callback(res);
                    }
                },error:function(){
                    layer.close(layerShadeId);
                }
            });
        };

        //初始化页面
        showMchInfoExtDiv(1);   //默认显示步骤一
        form.render();

    })
</script>